import React, { Component } from "react";
import "./TodoFooter.css";

export default class TodoFooter extends Component {
    render() {
        let {todos} = this.props;
        //计算总数
        let total = todos.length;
        //计算完成的数量
        let comTotal = todos.filter(item => item.done).length;
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox"  checked={todos.every(item => item.done) && todos.length > 0}  onChange={this.checkAllTodo} />
                </label>
                <span>
                    <span>已完成 {comTotal}</span> / 全部 {total}
                </span>
                <button className="btn btn-danger" onClick={this.cleanCompleted}>清除已完成任务</button>
            </div>
        );
    }

    //清空已经完成的任务
    cleanCompleted = () => {
        this.props.cleanCompleted();
    }

    //批量修改任务的状态
    checkAllTodo = (e) => {
        //当前多选框的状态
        // console.log(e.target.checked);
        this.props.checkAllTodo(e.target.checked);
    };
}
